<template>
<div class="content">
    <div class="region-content">
      <div class="region-form">
        <ul>
          <li><img src="~assets/img/recommond/id_card.png" alt="用户id"><span>用户ID:{{selectInfo.uid}}</span></li>
          <li><img src="~assets/img/recommond/icon_username.png" alt="用户姓名"><span>用户姓名:{{selectInfo.user_name}}</span></li>
          <li><img src="~assets/img/recommond/icon_level.png" alt="用户id"><span>等级:{{selectInfo.level}}</span></li>
          <li><img src="~assets/img/recommond/icon_2.png" alt="用户id"><span>推荐人:{{selectInfo.recommend_user}}</span></li>
          <li><img src="~assets/img/recommond/icon_1.png" alt="用户id"><span>接点人:</span>
           <select name="contactlist" id="region" class="select" v-model ="contact">
             <option  v-for="(item, index) in selectInfo.contactList" :key="index"  v-text="item.name"  :value="item.uid" ></option>
          </select>
          </li>
          <li><img src="~assets/img/recommond/icon_region.png" alt="用户id"><span>区域：</span>
          <select v-model="region" name="region" id="" class="select">
            <option value="l">左区</option>
            <option value="r">右区</option>
          </select>
          </li>
          <div class="tc"><button class="common-btn" @click="saveData()">确定</button></div>
        </ul>
      </div>
    </div>
</div>
</template>

<script>
import { MessageBox } from 'mint-ui'
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      selectInfo: {},
      region: 'l',
      contact: null,
      token: '1',
      zone: null,
      test: 1
    }
  },
  mounted () {
    this.getDetailInfo()
  },
  methods: {
    // 获取直推主页面内容
    getDetailInfo () {
      apiPost('user_recommend_detail',
        {
          recommend_id: this.$cookie.get('recommonId')
        }).then((res) => {
        if (res.status === 0) {
          this.selectInfo = res.data
          this.contact = this.selectInfo.contactList[0].uid
        } else {
          console.log(res.msg)
        }
      })
    },
    // 向后台传送填写直推信息数据
    saveData () {
      let contactId = this.contact
      console.log(contactId)
      let recommendId = this.$cookie.get('recommonId')
      let zone = this.region
      if (contactId != null) {
        apiPost('store_recommend',
          {
            recommend_id: recommendId,
            contact_id: contactId,
            zone: zone
          }).then((res) => {
            console.log(res)
            if (res.status === 0) {
              MessageBox({
                title: ' ',
                message: '添加成功'
              }).then(()=>{
                this.$router.push('/rec_total')
              })
            } else {
              MessageBox({
                title: ' ',
                message: res.msg
              })
            }
        })
      } else {
        MessageBox({
          title: ' ',
          message: '没有选择接点人'
        })
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '~lib/reset.scss';
  select {
    background: transparent;
  }
.region-content {
  .region-form {
    background-color: #fff;
    padding: 0 16px 50px 16px;
    margin-top: 10px;
    ul {
      .common-btn {
        opacity: 1;
      }
      li {
        padding: 18px 0;
        font-size: $font-15;
        letter-spacing: 1px;
        border-bottom: 1px solid #e5e5e5;
        img {
          width: 24px;
          margin-right: 10px;
        }
        select {
          width: 65%;
          border: none;
          outline: none;
        }
      }
    }
  }
}
</style>
